<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function myAxios(options) {
      const {
        url,
        method = 'get',
        data
      } = options
      return new Promise((resolve, reject) => {
        // 1.实例化异步对象
        const xhr = new XMLHttpRequest()
        // 2.设置请求的 地址 和方法
        xhr.open(method, url)
        xhr.setRequestHeader('content-type', 'application/json')
        // 3.注册回调函数 服务器响应内容回来之后触发
        xhr.addEventListener('load', function () {
          console.log(xhr.response)
          resolve(JSON.parse(xhr.response))
        })
        // 4.发送请求
        xhr.send(JSON.stringify(data))
      })
    }

    const p1 = myAxios({
      url: 'http://ajax-api.itheima.net/api/news',
    })
    const p2 = myAxios({
      url: 'http://ajax-api.itheima.net/api/books',
    })
    Promise.all([p1, p2]).then((res) => {
      console.log(res)
      // 渲染页面
    })
    Promise.race([p1, p2]).then((res) => {
      console.log('race', res)
    })
  </script>
</body>

</html>